<template>
  <div class="emergency_box">
    <div class="emergency_top">
      <div class="emergency_title">物料采购排行</div>
      <div class="emergency_month">
        <div :class="searchDateNumber == 2? 'emergency_ThisMarch1':'emergency_March'" @click="getList(2)"><span>近三个月</span></div>
        <div :class="searchDateNumber == 1? 'emergency_ThisMarch1':'emergency_LastMarch'" @click="getList(1)"><span>上月</span></div>
        <div :class="searchDateNumber == 0? 'emergency_ThisMarch2':'emergency_ThisMarch'" @click="getList(0)"><span>本月</span></div>
      </div>
    </div>
    <div v-if="tableDate&&tableDate.length>0" class="echarts_main">
      <div class="echarts_main_left">
        <div v-for="(item,index) in tableDate" :key="index" class="left_item">
          <div class="left_item_index" :style="{'background-color':index==3||index==4?'rgb(172,196,223)':'rgb(255,145,22)'}">{{ index+1 }}</div>
          <div class="left_item_name">{{ item.material_name }}</div>
        </div>
      </div>
      <div id="materialPurchaseSort" class="echarts_main_right" style="height:100%" />
    </div>
    <div v-else class="echarts_noData">
      <svg-icon icon-class="暂无数据" />
    </div>

  </div>
</template>

<script>
import { materialPurchaseSort } from '@/api/purchaseManage/purchaseStatistics/purchaseBoard'
import { mapGetters } from 'vuex'
export default {
  name: 'EmergencyDegreeDistribution',
  computed: {
    ...mapGetters([
      'windowResizeTag', 'companyId'
    ])
  },
  watch: {
    windowResizeTag() {
      if (this.myChart || this.vertical) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.drawLine()
          }, 500)
        })
      }
    }
  },
  data() {
    return {
      msg: 'fafa',
      tableDate: [],
      searchDateNumber: 0,
      pageData: {
        searchDateNumber: 0
      },
      timer: undefined,
      myChart: undefined
    }
  },
  mounted() {
    // this.drawLine()
    this.getList(0)
  },
  beforeDestroy() {
    // 页面关闭清除定时器
    clearInterval(this.timer)
  },
  methods: {
    getList(num) {
      clearInterval(this.timer)
      this.searchDateNumber = num
      switch (num) {
        case 0:
          this.pageData.searchDateNumber = 0
          break
        case 1:
          this.pageData.searchDateNumber = 1
          break
        case 2:
          this.pageData.searchDateNumber = 2
          break
      }
      this.getListData(this.pageData.searchDateNumber)
    },
    getListData(searchDateNumber) {
      materialPurchaseSort(searchDateNumber, this.companyId).then(res => {
        this.tableDate = res.data
        this.$nextTick(() => {
          this.drawLine()
        })
      })
    },
    drawLine() {
      if (this.myChart) {
        this.$echarts.init(document.getElementById('materialPurchaseSort')).dispose()
      }
      this.myChart = this.$echarts.init(document.getElementById('materialPurchaseSort'))

      const arr = this.tableDate
      const colorList = ['#387BFC', '#5a8cfd', '#83a9fe', '#d6e2ff', '#ebf1ff']
      this.myChart.setOption({
        legend: {},
        grid: {
          left: '70',
          top: '20',
          right: '25',
          bottom: '30'
        },
        xAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.2)'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.2)'
            }
          },
          axisLabel: {
            show: true,
            color: '#999999', // 更改坐标轴文字颜色
            textStyle: {
              fontSize: 12 // 更改坐标轴文字大小
            }
          }
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            offset: 100,
            axisLabel: {
              show: true,
              align: 'left',
              textStyle: {
                color: '#fff',
                fontSize: '14'
              },
              formatter: function(value, index) {
                const row = JSON.parse(value)
                return '{number| ' + row.materialSum + '}'
              },
              rich: {
                number: {
                  fontSize: 16,
                  color: '#999999',
                  align: 'right',
                  width: 90
                }
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: arr.map(item => JSON.stringify(item))

          }
        ],
        series: [
          {
            type: 'bar',
            zlevel: 1,
            barWidth: 12,
            data: arr.map(item => item.materialSum),
            itemStyle: {
              normal: {
                barBorderRadius: [0, 20, 20, 0],
                color: (params) => {
                  return colorList[params.dataIndex]
                }
              }
            },
            silent: true,
            // barWidth: 30, // 柱图宽度
            barGap: '-100%'
          }
        ]
      })
    }
  }
}
</script>

<style lang="less" scoped>
.emergency_box{
  width: 100%;
  height: calc(100% - 50px);
}
.emergency_top{
  display: flex;
  justify-content: space-between;
  .emergency_title{
    font-size: 20px;
    font-weight: bold;
    line-height: 34px;
    letter-spacing: -0.21px;
    color: #333333;
    padding-top: 16px;
    padding-left: 20px;
  }
  .emergency_month{
    display: flex;
    font-size: 18px;
    font-weight: normal;
    line-height: 25px;
    letter-spacing: -0.16px;
    color: #999999;
    padding-top: 22px;
    padding-right: 20px;
    cursor: pointer;
    .emergency_ThisMarch1{

      font-size: 18px;
      font-weight: normal;
      line-height: 25px;
      letter-spacing: -0.16px;
      color: #387BFC;
      padding-right: 30px;
    }
    .emergency_ThisMarch2{

      font-size: 18px;
      font-weight: normal;
      line-height: 25px;
      letter-spacing: -0.16px;
      color: #387BFC;
    }
    .emergency_March{
      padding-right: 30px;
    }
    .emergency_LastMarch{
      padding-right: 30px;
    }
  }
}
.echarts_main{
  width: 100%;
  height: 100%;
  display: flex;
  .echarts_main_left{
    width: 25%;
    height: calc(100% - 10px);
    padding: 20px 10px 20px 21px;
    display: flex;flex-direction: column;flex-wrap: wrap;

    .left_item{
      display: flex;align-items: center;
      flex: 1;width: 100%;
      .left_item_index{
        color: white;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;justify-content: center;align-items: center;
      }
      .grey{
        background-color: rgba(231, 231, 231, 1)
      }
      .left_item_name{
        padding-left: 20px;
        width: calc(100% - 30px);
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        color: rgba(51, 51, 51, 1);
        overflow:hidden; //超出的文本隐藏
        text-overflow:ellipsis; //溢出用省略号显示
        white-space:nowrap; //溢出不换行
      }
    }
  }
  .echarts_main_right{
    width: 75%;
    height: 100%;
  }
}
</style>

